<template lang="">
  <div class="center" style="height: auto;">
    <div class="main" style="border: 1px solid #fff;background-color: #fff;height: auto;border-radius: 10px">
      <!-- 销售机会详情展示 -->
      <div class="top">
        <div class="box">
          <img src="../../../assets/images/组 5.png" alt="">
        </div>
        <div class="title"
          style="text-align: left;margin-left: 0px;margin-top:30px;border-left: 3px solid #fe0100;width: 200px;height: 25px;">
          <h3 style="color:#fe0100 ;font-weight: 500;font-size: 18px;padding-left: 15px;">项目详情</h3>
        </div>
        <div class="bj" v-if="type === 1" style="border: 0px solid #000;width: 450px;margin: 40px 20px;">
          <el-form ref="changeData" :model="changeData" label-width="130px">
            <el-form-item label="项目">
              <el-input placeholder="请输入名称" v-model="changeData.businessName"></el-input>
            </el-form-item>
            <el-form-item label="项目来源">
              <el-input placeholder="请输入项目来源" v-model="changeData.salesSource"></el-input>
            </el-form-item>
            <el-form-item label="项目状态">
              <el-select v-model="changeData.salesStatus" clearable filterable>
                <el-option label="进行中" value="1"></el-option>
                <el-option label="归档" value="2"></el-option>
                <el-option label="废弃" value="3"></el-option>
                
              </el-select>
            </el-form-item>
            <el-form-item label="预期金额">
              <el-input placeholder="请输入名称" v-model="changeData.expecteEarn"></el-input>
            </el-form-item>
            <el-form-item label="行业">
              <el-select v-model="changeData.industry" clearable filterable @change="getProcessList()">
                <el-option v-for="item in industryList" :key="item.dictVar" :label="item.dictValue"
                  :value="item.dictKey">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目阶段">
              <el-select v-model="changeData.salesProcessId" clearable filterable>
                <el-option v-for="item in processList" :key="item.salesProcessId" :label="item.processName"
                  :value="item.salesProcessId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户">
              <el-select v-model="changeData.customId" clearable filterable>
                <el-option v-for="item in userList" :key="item.userId" :label="item.username" :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="销售员">
              <el-select v-model="changeData.salesmanId" clearable>
                <el-option v-for="(item,index)  in userList1" :key="index" :label="item.realname" :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区域">
              <el-select v-model="changeData.province" placeholder="请选择省份" clearable
                style="border:1px solid #b6b6b6;width: 300px;overflow: hidden;" @change="getCityList()">
                <el-option v-for="item in dictList" :key="item.dictId" :label="item.dictKey" :value="item.dictKey">
                </el-option>
              </el-select>
              <i @click="dialogFormVisible1 = true" class="el-icon-plus"
                style="position: absolute;top: 15px;left: 330px;color: #0060ff;font-weight: 700;cursor: pointer;"></i>
              <el-select v-model="changeData.city" placeholder="请选择市" clearable
                style="border:1px solid #b6b6b6;width: 300px;overflow: hidden;">
                <el-option v-for="(item,index) in cityList" :key="item.index" :label="item.dictValue"
                  :value="item.dictValue"></el-option>
              </el-select>
              <i @click="dialogFormVisible2 = true" class="el-icon-plus"
                style="position: absolute;top: 80px;left: 330px;color: #0060ff;font-weight: 700;cursor: pointer;"></i>
            </el-form-item>
            <el-form-item label="项目跟进状态">
              <el-select v-model="changeData.followStatus" placeholder="请选择状态" clearable
                style="border:1px solid #b6b6b6;width: 300px;overflow: hidden;">
                <el-option v-for="(item,index) in followList" :key="item.index" :label="item.dictValue"
                  :value="item.dictKey"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="预计完成">
              <el-date-picker v-model="changeData.expecteEndTime" type="month" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="实际完成">
              <el-date-picker v-model="changeData.completeTime" type="month" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="优先级 ">
              <el-rate style="margin-top: 10px;" v-model="changeData.salesPriority">
              </el-rate>
            </el-form-item>
            <el-form-item label="详情"><br>
              <el-input type="textarea" autosize v-model="changeData.salesDescribe"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="updateChange()" class="button" type="danger">确定</el-button>
              <el-button @click="type = 0" class="button" type="danger">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="bx" v-else
          style="border: 0px solid #000;width: auto;height:auto;margin: 20px 20px;text-align: left;">
          <ul style="list-style: none;padding: 0;margin:0;">
            <li v-model="changeData" style="text-align: left;margin-left: 15px">
              <p>
                <span class="title" style="margin-left: 30px;">项目 </span>
                <span class="blue" style="margin-left: 24px;background-image: -webkit-linear-gradient(45deg, #fe0100, #fe5900ee);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation:hue6sinfinitelinear;font-weight:600;">{{changeData.businessName}}</span>
              </p>
              <p>
                <span class="title">项目状态 </span>
                <span style="margin-left: 25px" v-if="changeData.salesStatus==1">
                  进行中</span>
                <span style="margin-left: 25px" v-if="changeData.salesStatus==2">
                  归档</span>
                <span style="margin-left: 25px" v-if="changeData.salesStatus==3">
                  废弃</span>
              </p>
              <p>
                <span class="title">所属行业 </span>
                <span style="margin-left: 25px">
                  {{industryDict[changeData.industry]}}</span>
              </p>
              <p>
                <span class="title">项目来源 </span>
                <span style="margin-left: 25px">
                  {{changeData.salesSource}}</span>
              </p>
              <p>
                <span class="title">预期金额 </span>
                <span style="margin-left: 22px;color:rgb(238, 157, 37)"><i class="el-icon-collection-tag"
                    style="font-weight:600;color:#161616">&nbsp;</i>{{(parseFloat(changeData.expecteEarn)).toLocaleString('zh-CN',
                  { style:
                  'currency', currency:
                  'cny', currencyDisplay: 'symbol' })}}</span>
              </p>
              <p>
                <span class="title">计划经费 </span>
                <span style="margin-left: 22px;" v-model="sectionList"><i class="el-icon-collection-tag"
                    style="font-weight:600;color:#161616">&nbsp;</i>{{(parseFloat(sectionList.data)).toLocaleString('zh-CN',
                  { style:
                  'currency', currency:
                  'cny', currencyDisplay: 'symbol' })}}</span>
              </p>
              <p>
                <span class="title">实际经费 </span>
                <span style="margin-left: 22px;" v-model="reimburseList"><i class="el-icon-collection-tag"
                    style="font-weight:600;color:#161616">&nbsp;</i>{{(parseFloat(reimburseList.data)).toLocaleString('zh-CN',
                  { style:
                  'currency', currency:
                  'cny', currencyDisplay: 'symbol' })}}
                  <span
                    style="margin-left: 22px;font-size:14px">({{(parseFloat(reimburseList.data)/parseFloat(sectionList.data)*100).toFixed(2)}}%)</span></span>
              </p>
              <p>
                <span class="title" style="margin-left: 30px;">客户 </span>
                <span style="margin-left: 25px;"><i class="el-icon-office-building"
                    style="font-weight:600;color:#161616">&nbsp;</i>{{changeData.username}}</span>
              </p>
              <p>
                <span class="title" style="margin-left: 30px;">区域</span>
                <span style="margin-left: 30px;">{{changeData.province}}{{changeData.city}}</span>
              </p>
              <p>
                <span class="title" style="margin-left: 15px;">销售员 </span>
                <span style="margin-left: 25px;"><i class="el-icon-user"
                    style="font-weight:600;color:#161616">&nbsp;</i>{{changeData.realname}}</span>
              </p>
              <p>
                <span class="title">预计完成</span>
                <span class="blue" style="margin-left: 30px;"><i class="el-icon-time"
                    style="font-weight:600;color:#161616">&nbsp;</i>{{moment(changeData.expecteEndTime).format('YYYY/MM/DD')}}
                </span>
              </p>
              <p>
                <span class="title">实际完成</span>
                <span class="blue" style="margin-left: 30px;"><i class="el-icon-time"
                    style="font-weight:600;color:#161616">&nbsp;</i>{{moment(changeData.completeTime).format('YYYY/MM/DD')}}
                </span>
              </p>
              <p>
                <span class="title" style="margin-left: 15px;">优先级 </span>
                <span class="blue">
                  <el-rate disabled v-model="changeData.salesPriority" style="margin-left: 110px;margin-top: -20px;">
                  </el-rate>
                </span>
              </p>
              <p
                style="word-break: break-all;
              position: relative;top: 0px;left:-35px;text-align: left;margin-left: 0px;margin-top:30px;border: 0px solid #000;">
                <span class="title" style="padding-left: 20px;left: 500px;
                color:#fe0100 ;font-weight: 500;font-size: 18px;border-left: 3px solid #fe0100;">详情 </span><br>
              <pre
                style="margin-left: 27px;font-size:16px ;font-family:Microsoft YaHei;width: 100%;border: 0px solid #000;white-space: pre-wrap;word-wrap: break-word;line-height: 30px;">{{changeData.salesDescribe}}</pre>
              </p>
            </li>
          </ul>
          <el-button @click="type = 1" class="button" type="danger">编辑</el-button>
          <el-button class="button" @click="go" type="danger">返回</el-button>
        </div>
        <!-- 添加省弹框 -->
        <el-dialog :visible.sync="dialogFormVisible1">
          <el-form v-model="dictData">
            <el-form-item>
              <el-input v-model="dictData.dictKey" autocomplete="off" placeholder="请添加省会"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 10px;overflow: hidden;"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="emity1" class="button" type="danger">取 消</el-button>
            <el-button class="button" type="danger" @click="addDict">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 添加市弹框 -->
        <el-dialog :visible.sync="dialogFormVisible2">
          <el-form v-model="cityData">
            <el-select v-model="dictData.dictKey" placeholder="请选择省份"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
              <el-option v-for="item in dictList" :key="item.dictId" :label="item.dictKey" :value="item.dictKey">
              </el-option>
            </el-select>
            <el-form-item placeholder="请添加市">
              <el-input v-model="cityData.dictValue" autocomplete="off"
                style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="emity" class="button" type="danger">取 消</el-button>
            <el-button class="button" type="danger" @click="addCity">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 联系人信息 -->
        <div class="tabs" style="border: 0px solid #000;border-radius: 10px;overflow: hidden;">
          <p class="title"
            style="padding-left: 20px;color:#fe0100 ;font-weight: 500;font-size: 18px;border-left: 3px solid #fe0100;text-align: left;">
            联系人列表</p>
          <el-table :data="linkmanList" stripe style="width: 100%;text-align: center;">
            <el-table-column prop="name" label="联系人姓名" width="300" align="center">
            </el-table-column>
            <el-table-column prop="department" label="部门" width="300" align="center">
            </el-table-column>
            <el-table-column prop="duty" label="职务" width="300" align="center">
            </el-table-column>
            <el-table-column prop="linkmanType" label="等级" width="300" align="center">
            </el-table-column>
            <el-table-column prop="phone" label="电话" align="center">
            </el-table-column>

          </el-table>
          <el-pagination style="margin:20px;text-align: right;" @current-change="handleCurrentChange" :page-size="size"
            :current-page="current" :total="total" layout="prev, pager, next">
          </el-pagination>
        </div>
      </div>
      <!-- 销售机会跟进动态 -->
      <div class="bottom" style="margin-left: 30px;padding: 0px 20px;">
        <div class="box1" style="text-align: left;">
          <div class="left">
            <img src="../../../assets/images/crm_78.png" alt="">
            <span style="position: relative;top: -6px;left: 2px;">跟进动态</span>
          </div>

          <div class="right" style="float: right;margin-top: -30px;margin-right: 25px;">
            <el-button style="border-radius: 50px;" @click="dialogFormVisible = true" class="button" type="danger">添加
            </el-button>
            <!-- 添加弹框 -->
            <el-dialog :visible.sync="dialogFormVisible">
              <el-form>
                <el-form-item label="内容">
                  <el-input style="font-family:Microsoft YaHei" type="textarea" :rows="5" placeholder="请输入内容"
                    v-model="procedureData.content">
                  </el-input>
                </el-form-item>
                <el-form-item label="联系人" style="margin-top: 14px">
                  <el-select v-model="procedureData.linkmanId" placeholder="请选择联系人" clearable
                    style="margin-left: 14px;margin-bottom: 0px;">
                    <el-option v-for="item in linkmanList" :key="item.linkmanId" :label="item.name"
                      :value="item.linkmanId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="开始时间">
                  <el-date-picker v-model="procedureData.startTime" type="datetime" placeholder="选择日期时间"
                    default-time="12:00:00">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                  <el-date-picker v-model="procedureData.endTime" type="datetime" placeholder="选择日期时间"
                    default-time="12:00:00">
                  </el-date-picker>
                </el-form-item>
              </el-form>
              <div style="text-align: center; margin: 0">
                <el-button size="mini" @click="empty" class="button" type="danger">取消</el-button>
                <el-button size="mini" @click="addProcedure()" class="button" type="danger">确定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
        <div class="box2"
          style="padding-left:130px;height: auto;margin-top: 50px;text-align: left;border: 0px solid #000;">
          <el-timeline>
            <el-timeline-item :timestamp="moment(item.startTime).format('YYYY年MM月DD日 HH:mm')" placement="top"
              v-for="(item,index1) in procedureList" :key="index1">
              <el-card
                style="background-color: green;border:4px solid #fe000021;height: 120px;line-height: 25px;border-radius: 15px;">
                <!-- <img src="../../../assets/images/user.jpg" alt="" style="width: 30px;border-radius: 15px;"> -->
                <span style="font-size: 14px;color: #686868;position: relative;top: 8px;">
                  <i class="el-icon-phone-outline"
                    style="font-weight:600;color:#0060ff">&nbsp;</i>联系人：{{item.linkmanName}}&nbsp;&nbsp;&nbsp;
                  <i class="el-icon-user"
                    style="font-weight:600;color:#0060ff">&nbsp;</i>销售员：{{item.salesmanName}}&nbsp;&nbsp;&nbsp;
                  <i class="el-icon-time"
                    style="font-weight:600;color:#0060ff">&nbsp;</i>提交时间：{{moment(item.createTime).format('YYYY年MM月DD日HH:mm')}}
                </span><br>
                <pre
                  style="margin-left:14px;font-size: 14px;color: #272727;text-indent:2em;font-family:Microsoft YaHei">{{item.content}}</pre>
                <div class="cz"
                  style="float: right;margin-right: 20px;position: relative;top: -60px;border: 0px solid #000">
                  <!-- 删除销售过程弹框 -->
                  <el-popconfirm @confirm="delProcedure(item.followId)" confirm-button-text='好的'
                    cancel-button-text='不用了' icon="el-icon-info" icon-color="red" title="确定删除该销售过程吗？">
                    <span slot="reference">
                      <i class="el-icon-close"></i>删除
                    </span>
                  </el-popconfirm>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  export default {

    inject: ['reload'],
    data() {
      return {
        dialogFormVisible2: false,
        dialogFormVisible1: false,
        dictList: [],
        cityList: [],
        dictVar: '',
        dictData: {
          dictVar: 'province',
          dictKey: '',
          dictValue: '',
        },
        cityData: {
          dictVar: '',
          dictKey: '',
          dictValue: '',
        },
        dialogVisible: false, // 弹出框显示隐藏的控制变量
        dialogFormVisible: false,
        index: 'primary',
        // visible: '',
        textarea: '',
        current: 0,
        size: 100,
        type: 0,
        total: 0,
        title: '',
        businessName: '',
        expecteEarn: '',   //预期收益
        customId: '',    //客户
        salesPriority: '',   //优先级
        salesDescribe: '',  //描述
        changeData: {},   //销售机会详情
        sectionList: [],    //计划经费
        reimburseList: [],  //实际经费
        industryDict: {},//行业映射
        industryList: [],//行业列表
        processList: [],

        number: '',
        procedureData: {
          content: '',
          linkmanId: '',
          followId: '',
          startTime: '',
          endTime: '',
          salesId: '',
          status: '2',
          salesmanId: this.$cookies.get("userId"),


        },
        procedureList: [],//跟进过程列表
        linkmanList: [],
        userList: [],
        userList1: [],
        followList: [],
        followStatus: '',
        // salesId: this.$route.query.salesId,
        //编辑
        activeButton: 0,
        isEditChange: false, // 编辑机会
      }
    },
    mounted() {
      this.getIndustryDictList()
      this.procedureData.salesId = this.$route.query.salesId
      this.salesId = this.$route.query.salesId
      //this.getProcessListMounted()
      // this.changeData.customId = this.customId
      // console.log(this.changeData.customId)
      this.getChangeList()
      this.getUserList()
      this.getDictList()
      this.getFollowList()

    },
    methods: {
      moment,
      handleCurrentChange(val) {
        this.current = val
        this.getUserLinkman()
      },
      columnFormat(row, column) {
        switch (column.property) {
          case "linkmanType":
            var linkmanType = ["决策层", "执行层", "内线"]
            var value = linkmanType[Number(row[column.property])]
            break;
        }
        return value;
      },
      // 获取跟进状态列表
      async getFollowList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: current,
          size: size,
          dictVar: 'followStatus',

        }
        let result = await this.$API.dict.reqDictList(data)
        this.total = result.data.total;
        this.followList = result.data.data

      },

      // 获取客户列表
      async getUserList() {
        // 解构出参数
        const { current, size, userType } = this;
        var data = {
          current: current,
          size: size,
          userType: '23'
        }
        var data1 = {
          current: current,
          size: size,
          userType: '1'
        }
        let result = await this.$API.user.reqUserList(data)
        this.total = result.data.total;
        this.userList = result.data.data
        let result1 = await this.$API.user.reqUserList(data1)
        this.total = result1.data.total;
        this.userList1 = result1.data.data
      },
      //获取销售机会详情
      getChangeList() {
        var data = {
          current: 1,
          size: 1,
          salesId: this.salesId,
        }
        this.$API.change.reqChangeDetails(data).then(res => {
          if (res.data.code == 200) {
            if (res.data.data.length != 0) {
              this.changeData = res.data.data[0]
              // alert(this.changeData.customId)
              this.getProcedureList()
              this.getLinkmanList()
              this.getSectionList()
              this.getReimburseList()
              this.getProcessListMounted()
            } else {
              this.changeData = []
            }
          } else {
            this.$message.error("查询失败！");
          }
        })
      },
      //计划经费
      getSectionList() {
        // 获取资源列表接口
        var data = {
          number: this.changeData.expecteEarn
        }
        this.$API.change.reqSectionList(data).then(res => {
          if (res.data.code == 200) {

            this.sectionList = res.data
            // console.log(this.sectionList)
          } else {
            this.$message.error("查询失败！");
          }
        })
      },
      // 获行业映射字典
      async getIndustryDictList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'industry'
        }
        let result = await this.$API.dict.reqDictList(data)
        this.industryList = result.data.data
        this.industryDict = this.$ListToUtil.ListToDict(result.data.data)
        
        //console.log(this.industryDict)

      },
      // 实际经费
      getReimburseList() {
        // 获取资源列表接口
        var data = {
          salesId: this.changeData.salesId
        }
        this.$API.change.reqReimburseList(data).then(res => {
          //console.log(res.data.code)
          //console.log(res.data.data)
          if (res.data.code == 200) {
            this.reimburseList = res.data
            // console.log(this.reimburseList)
          } else {
            this.$message.error("查询失败！");
          }
        })
      },
      async getProcessListMounted() {
        var data = {
          current: 1,
          size: 100,
          industry: this.changeData.industry
        }
        let result = await this.$API.change.reqSellList(data)
        this.processList = result.data.data
      },
      async getProcessList() {
        var data = {
          current: 1,
          size: 100,
          industry: this.changeData.industry
        }
        let result = await this.$API.change.reqSellList(data)
        this.processList = result.data.data
        this.changeData.salesProcessId = ""
      },
      // 获取省列表
      async getDictList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: current,
          size: size,
          dictVar: 'province'
        }
        let result = await this.$API.dict.reqDictList(data)
        this.total = result.data.total;
        this.dictList = result.data.data

      },
      // 获取市列表
      async getCityList() {
        // 解构出参数
        this.changeData.city = ''
        const { current, size, dictVar } = this;
        var data = {
          current: current,
          size: size,
          dictVar: this.changeData.province
        }
        let result = await this.$API.dict.reqDictList(data)
        this.total = result.data.total;
        this.cityList = result.data.data
      },
      //  添加省
      addDict() {
        // 解构出参数        
        var data = this.dictData;
        this.dictData.dictValue = this.dictData.dictKey
        this.$API.dict.reqAddDict(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功！");
            this.dialogFormVisible1 = false;
            // this.reload();
            this.getDictList();
          } else {
            this.$message.error("添加失败！");
          }
        })
      },
      // 添加市
      addCity() {
        // 解构出参数        
        var data = this.cityData;
        this.cityData.dictVar = this.dictData.dictKey
        this.cityData.dictKey = this.cityData.dictValue
        this.$API.dict.reqAddDict(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功！");
            this.dialogFormVisible2 = false;
            // this.reload();
            this.getCityList();
          } else {
            this.$message.error("添加失败！");
          }
        })
      },
      emity() {
        this.dictData.dictKey = ''

        this.cityData.dictValue = ''
        this.dialogFormVisible2 = false;
      },
      emity1() {
        this.dictData.dictKey = ''
        this.dialogFormVisible1 = false;
      },
      //联系人列表
      getLinkmanList() {
        // 获取资源列表接口
        var data = {
          current: this.current,
          size: this.size,
          customId: this.changeData.customId
          // customId:'1535dfd63ec2dab3f501684d26ce7162'
        }
        this.$API.linkman.reqLinkmanList(data).then(res => {
          if (res.data.code == 200) {
            this.linkmanList = res.data.data
          } else {
            this.$message.error("查询失败！");
          }
        })
      },

      //  编辑确定
      updateChange() {
        var data = this.changeData
        // 获取资源列表接口
        this.$API.change.reqUpdataChange(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("修改成功！");
            this.reload()
            this.type = 0
          } else {
            this.$message.error("修改失败！");
          }
        })
      },

      //跟进过程查询
      getProcedureList() {
        var data = {
          salesId: this.salesId,
          current: this.current,
          size: this.size,
          status: this.status

        }
        this.$API.change.reqProcedureList(data).then(res => {
          if (res.data.code == 200) {
            this.procedureList = res.data.data
          } else {
            this.$message.error("查询失败！");
          }
        })
      },

      // 添加跟进
      addProcedure() {
        var data = this.procedureData;
        // var status = this.status
        var salesmanId = this.salesmanId
        if (data.content == '') {
          this.$message("联系人名称不能为空")
        } else {
          this.$API.change.reqAddProcess(data).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功！");
              this.dialogFormVisible = false;
              this.getProcedureList();
            } else {
              this.$message.error("添加失败！");
            }
          })
        }
      },
      // 跟进清空
      empty() {
        this.procedureData.content = ""
        this.procedureData.linkmanId = ""
        this.procedureData.startTime = ""
        this.procedureData.endTime = ""

        this.dialogFormVisible = false



      },
      // 删除跟进
      async delProcedure(followId) {
        // 解构出参数
        // const { followId} = this;
        var data = {
          followId: followId,
        }
        let result = await this.$API.change.reqDelProcess(data);
        this.$message.success("删除成功！");
        // this.reload();
        this.getProcedureList()
      },
      // 返回
      go() {
        this.$router.go(-1)
      },
    },

  }
</script>
<style scoped>
  @import "../../../style/style.css";

  .top {
    margin: 30px 50px;
    /* padding-left: 30px; */
    border: 0px solid #000;
    border-bottom: 1px dashed #ccc;
  }

  .top .box {
    border: 0px solid #000;
    width: 85px;
    float: right;
    padding: 0;
    margin-top: -30px;

  }

  .top .box2 {

    border: 0px solid red;
    height: 400px;
    text-align: left;

  }

  .top .box2 ul {
    line-height: 30px;
    list-style: none;
    padding: 0;
    border: 0px solid #000;
    height: auto;
    width: 500px;
    float: left;
    margin: 0;

  }

  .top .box2 ul li {
    /* float: left; */
    width: 450px;
    display: flex;

    /* justify-content:space-between; */
  }

  .top .box2 ul li span {
    margin-left: 50px;
    color: rgb(41, 112, 243);
  }

  .top>>>.el-textarea__inner {
    height: 200px !important;
    width: 200%;
  }

  .bx ul li p .title {
    color: #888;
    margin-right: 20px;

  }

  .el-card {
    border: none;
    box-shadow: none;
    background-color: transparent !important;

  }

  .el-card :hover {
    background-color: #eee;
    cursor: pointer;
    height: auto;

  }

  .el-card .cz {
    opacity: 0;
  }

  .el-card :hover .cz {
    opacity: 1;
    margin-top: 35px;
  }

  .bottom>>>.el-timeline-item__timestamp {
    position: absolute !important;
    left: -170px !important;
  }

  .bottom>>>.el-card__body {

    font-size: 16px;
    padding: 0 10px !important;
    padding-top: -30px;
    height: 100% !important;
  }

  .bottom>>>.el-timeline-item__node {
    background-color: #fe0100 !important;
  }

  .bottom>>>.el-textarea__inner {
    height: 100% !important;
  }

  .bottom>>>.el-timeline-item__tail {
    border-left: 2px solid #fe0100;
    margin-top: 2px;
    height: 97%;

  }

  .right>>>.el-dialog {
    width: 30%;
  }

  .right>>>.el-select .el-input {
    width: auto;
  }

  .el-input,
  .el-select,
  .el-date-picker {
    border: 1px solid #b6b6b6;
    border-radius: 10px;
    overflow: hidden;
    width: 300px;
    /* position: relative;
    top: 15px; */
  }

  .el-select {
    margin-left: 20px;
    margin-bottom: 10px;
  }

  .el-form-item {
    margin-bottom: 0;
  }

  .bj>>>.el-form-item__content {
    text-align: end;
  }

  .bj>>>.el-rate {
    margin-right: 180px;
  }

  .bj>>>.el-select .el-input {
    width: 100%;
  }
</style>